<template>
  <div class="base-table">
    <div class="action">
      <!-- 插槽 -->
      <slot name="action"></slot>
    </div>
    <!-- v-bind="$attrs" 绑定使用的事件和数据  -->
    <el-table v-bind="$attrs">
      <!-- 包裹表格 -->
      <template v-for="item in columns" :key="item.prop">
        <!-- 复选框 -->
        <el-table-column
          type="selection"
          width="55"
          v-if="item.type == 'selection'"
          key="selection"
        />

        <el-table-column v-bind="item" v-else-if="!item.type">
        </el-table-column>
        <!--  -->
        <el-table-column v-if="item.type == 'action'" v-bind="item">
          <!-- 自定义列 -->
          <template #default="scope">
            <template v-for="(btn, index) in item.list" :key="index">
              <el-button
                :type="btn.type || 'text'"
                size="small"
                @click="handleAction(index, scope.row)"
                >{{ btn.text }}</el-button
              >
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="pager.total"
      :page-size="pager.pageSize"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  // 组件名字
  name: "BaseTable",
  // 定义props，接收父组件的数据
  props: ["columns", "pager"],
  // composipon api ，
  setup(props, { emit }) {
    // 分别是 User组件传的数据
    // console.log(props);
    // 行为
    const handleAction = (index, row) => {
      // 抛回去给父组件触发
      emit("handleAction", { index, row: { ...row } });
    };
    // 分页
    const handleCurrentChange = (pageNum) => {
      emit("handleCurrentChange", pageNum);
    };
    return {
      handleAction,
      handleCurrentChange,
    };
  },
};
</script>

<style>
</style>